﻿function imgShow(outerdiv, innerdiv, bigimg, _this) {
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性  

    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function () {
        var windowW = $(window).width();//获取当前窗口宽度  
        var windowH = $(window).height();//获取当前窗口高度  
        var realWidth = this.width;//获取图片真实宽度  
        var realHeight = this.height;//获取图片真实高度  
        var imgWidth, imgHeight;
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  

        if (realHeight > windowH * scale) {//判断图片高度  
            imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放  
            imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度  
            if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度  
                imgWidth = windowW * scale;//再对宽度进行缩放  
            }
        } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度  
            imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放  
            imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度  
        } else {//如果图片真实高度和宽度都符合要求，高宽不变  
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放  

        var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距  
        var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距  
        $(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });

    $(outerdiv).click(function () {//再次点击淡出消失弹出层  
        $(this).fadeOut("fast");
    });
}
function max(a) {                                    //直接使用this-->a
    var maxadd = document.getElementById('maxadd');  //添加图片路径所在区域
    var img1 = a.firstChild;                         //获取d1下的第一个节点的元素
    var imglj = img1.src;                            //获取到图片的：图片路径
    if ($("#maxfixed").css("display") == "none") {   //判断弹出层是隐藏状态，就显示它
        /*显示*/
        $("#maxfixed").show();
    }
    console.log(img1);
    var theImage = new Image(); 

    theImage.src = imglj;

   // alert( "Width: " + theImage.width); 

    //alert( "Height: " + theImage.height); 
    var imgw = theImage.width;
    var imgh = theImage.height;
    var w1 = document.body.clientWidth;
    var h1 = document.body.clientHeight;
    if (imgh / h1 <= 0.4) {
        $('#maxadd').css('top', '30%');
        console.log(imgw + ' ' + imgh + ' ' + w1 + ' ' + h1 + ' ' + '1');
    }
    else {
        $('#maxadd').css('top', '5%'); console.log(imgw + ' ' + imgh + ' ' + w1 + ' ' + h1 + ' ' + '2');
    }
    if (imgw / w1 <= 0.4) {
        $('#maxadd').css('left', '40%'); console.log(imgw + ' ' + imgh + ' ' + w1 + ' ' + h1 + ' ' + '3');
    }
    else {
        $('#maxadd').css('left', '20%');
        console.log(imgw + ' ' + imgh + ' ' + w1 + ' ' + h1 + ' ' + '4');
    }
    var img2 = "<img src = " + imglj + " />";        //将刚才获取到的图片路径给到一个新创建的变量img2
    $("#maxadd").html(img2);                         //将创建的元素img2填充到弹出层的内容区域

    /*点击关闭*/
    $("#maxfixed").click(function () {                //给弹出层一个点击事件使其关闭弹出层
        if ($("#maxfixed").css("display") == "block") {
            $("#maxfixed").hide();
        }
    });
}

function bigImg(obj) {
    var imagurl = $(obj).attr('src');
    var img = '<img src=' + imagurl + ' />';
    //layer.open({
    //    type: 1,
    //    skin: 'layui-layer-demo', //样式类名
    //    closeBtn: 0, //不显示关闭按钮
    //    anim: 2,
    //    shadeClose: true, //开启遮罩关闭
    //    content: img,
    //    zIndex: 333333333333
    //});
    //imgShow("#outerdiv", "#innerdiv", "#bigimg", $(obj));
    //window.showModalDialog(imagurl);
    //alert(imagurl);
    //console.log(imagurl);
    //layer.alert('a');
    //layer.open({
    //    type: 1,
    //    skin: 'layui-layer-demo', //样式类名
    //    closeBtn: 0, //不显示关闭按钮
    //    anim: 2,
    //    shadeClose: true, //开启遮罩关闭
    //    content: '<img src=' + imagurl+'/>'
    //});
    max(obj);
}